import {
    Button,
    Input,
    Form,
    Popup,
    Area,
    Switch,
    Toast,
    NavBar,
} from "react-vant";

import { areaList } from "@vant/area-data";

import { useState } from "react";

import axios from "axios";

import { useNavigate } from "react-router-dom";

function Address() {
    let navigate = useNavigate();

    const [visible, setVisible] = useState(false);

    const [form] = Form.useForm();

    //新增地址
    const addNewAddress = (values) => {
        //参数
        /**
     *  appkey: 你的appkey,
        tokenString: token字符串,
        name: 姓名,
        tel: 电话,
        province: 省份,
        city: 市,
        county: 区县,
        addressDetail: 详细地址,
        areaCode: 地区编号,
        postalCode: 邮政编码,
        isDefault: 默认地址
     */

        let areaText = values.area.split(/\//);

        let data = {
            name: values.name,
            tel: values.tel,
            province: areaText[0],
            city: areaText[1],
            county: areaText[2],
            addressDetail: values.addressDetail,
            areaCode: "",
            postalCode: values.postalCode,
            isDefault: Number(
                values.isDefault === undefined
                    ? false
                    : values.isDefault
            ),
        };

        axios({
            method: "post",
            url: "/addAddress",
            data,
        })
            .then((res) => {
                if (res.data.code === 700) {
                    return navigate("/login");
                }
                Toast({
                    message: res.data.msg,
                });
            })
            .catch((err) => {});
    };

    //确定选择地区
    let selectArea = (value, option) => {
        //
        //

        if (option.length < 3) {
            Toast({
                message: "请选择省市区",
            });
            return;
        }

        let area = [];

        option.forEach((item) => {
            area.push(item.text);
        });

        //修改表单指定文本域的内容
        form.setFieldValue("area", area.join("/"));

        setVisible(false);
    };

    return (
        <div className="address">
            <NavBar
                title="新增地址"
                leftText="返回"
                rightText=""
                onClickLeft={() => navigate(-1)}
            />
            <div>
                <Form
                    form={form}
                    onFinish={addNewAddress}
                    footer={
                        <div
                            style={{
                                margin: "16px 16px 0",
                            }}
                        >
                            <Button
                                round
                                nativeType="submit"
                                type="primary"
                                block
                            >
                                保存
                            </Button>
                        </div>
                    }
                >
                    <Form.Item
                        rules={[
                            {
                                required: true,
                                message: "请填写姓名",
                            },
                        ]}
                        name="name"
                        label="姓名"
                    >
                        <Input placeholder="请输入姓名" />
                    </Form.Item>

                    <Form.Item
                        rules={[
                            {
                                required: true,
                                message: "请填写手机号",
                            },
                            {
                                pattern: /^1[3-9]\d{9}$/,
                                message: "手机号格式错误",
                            },
                        ]}
                        name="tel"
                        label="手机号"
                    >
                        <Input placeholder="请输入手机号" />
                    </Form.Item>

                    <Form.Item
                        isLink
                        name="area"
                        rules={[
                            {
                                required: true,
                                message: "地区",
                            },
                        ]}
                        label="地区"
                        onClick={() => setVisible(true)}
                    >
                        <Input
                            placeholder="请输入地区"
                            readOnly
                        />
                    </Form.Item>

                    <Form.Item
                        rules={[
                            {
                                required: true,
                                message: "详细地址",
                            },
                        ]}
                        name="addressDetail"
                        label="详细地址"
                    >
                        <Input placeholder="请输入详细地址" />
                    </Form.Item>

                    <Form.Item
                        rules={[
                            {
                                pattern: /^\d{6}$/,
                                message: "邮政编码格式错误",
                            },
                        ]}
                        name="postalCode"
                        label="邮政编码"
                    >
                        <Input placeholder="请输入邮政编码" />
                    </Form.Item>

                    <Form.Item
                        name="isDefault"
                        label="设为默认地址"
                        valuePropName="checked"
                        controlAlign="right"
                    >
                        <Switch size={20} />
                    </Form.Item>
                </Form>
            </div>

            <Popup
                visible={visible}
                onClose={() => setVisible(false)}
                position="bottom"
            >
                <div style={{ padding: "10px 20px" }}>
                    <Area
                        areaList={areaList}
                        onConfirm={(value, option) => {
                            selectArea(value, option);
                        }}
                        onCancel={() => {
                            setVisible(false);
                        }}
                    />
                </div>
            </Popup>
        </div>
    );
}

export default Address;
